<!DOCTYPE html>
<!-- NOTE: Styling is based on the CommonMark specification template:                -->
<!-- - https://github.com/commonmark/commonmark-spec/blob/master/tools/make_spec.lua -->
<!-- - https://github.com/commonmark/commonmark-spec/blob/master/tools/template.html -->
<!--                                                                                 -->
<!-- NOTE: 'TODO:' comments will be followed up as task(s) on this issue:            -->
<!-- - https://gitlab.com/gitlab-org/gitlab/-/issues/361241                          -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%= title %></title>
  <style type="text/css">
    body {
      font-family: Helvetica, arial, freesans, clean, sans-serif;
      line-height: 1.4;
      max-width: 48em;
      margin: auto;
      padding: 0 0.5em 4em;
      color: #333333;
      background-color: #ffffff;
      font-size: 13pt;
    }

    div#TOC ul { list-style: none; }
    h1 {
      font-size: 140%;
      font-weight: bold;
      border-top: 1px solid gray;
      padding-top: 0.5em;
    }

    h2 {
      font-size: 120%;
      font-weight: bold;
    }

    h3 {
      font-size: 110%;
      font-weight: bold;
    }

    h4 {
      font-size: 100%;
      font-weight: bold;
    }

    /* NOTE: "font-weight: bold" was applied to "a.definition" class in original CommonMark */
    /*       template, but in practice it was applied to all anchors                        */
    a {
      font-weight: bold;
    }


    /* TODO: Format whitespace in examples. This will require preprocessing to insert spans around them. */
    /*span.space { position: relative; }*/
    /*span.space:after {*/
    /*  content: "·";*/
    /*  position: absolute;*/
    /*  !* create a mark that indicates a space (trick from D. Greenspan) *!*/
    /*  top: 0; bottom: 7px; left: 1px; right: 1px;*/
    /*  color: #aaaaaa;*/
    /*}*/
    /*@media print {*/
    /*  a.dingus { display: none; }*/
    /*}*/

    div.example {
      overflow: hidden;
    }

    p {
      text-align: justify;
    }

    pre {
      padding: 0.5em;
      margin: 0.2em 0 0.5em;
      font-size: 88%;
    }

    pre {
      white-space: pre-wrap; /* css-3 */
      white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
      white-space: -o-pre-wrap; /* Opera 7 */
      word-wrap: break-word; /* Internet Explorer 5.5+ */
    }

    code {
      font-family: monospace;
      background-color: #d3e1e4;
    }

    pre > code {
      background-color: transparent;
    }

    .example {
      font-size: 0; /* hack to get width: 50% to work on inline-block */
      padding-bottom: 6pt;
    }

    .column pre {
      font-size: 11pt;
      padding: 2pt 6pt;
    }

    div.examplenum {
      font-size: 11pt;
      text-align: left;
      margin-bottom: 10px;
    }

    div.column {
      display: inline-block;
      width: 50%;
      vertical-align: top;
    }

    div.example > div:nth-child(2) {
      clear: left;
      background-color: #d3e1e4;
    }

    div.example > div:nth-child(3) {
      clear: right;
      background-color: #c9cace;
    }

    @media print {
      @page {
        size: auto;
        margin: 1.2in 1.2in 1.2in 1.2in;
      }

      body {
        margin: 0;
        line-height: 1.2;
        font-size: 10pt;
      }

      .column pre {
        font-size: 9pt;
      }

      div.examplenum {
        font-size: 9pt;
      }
    }
  </style>
  <!-- TODO: Extract this javascript out to a separate file and unit test it -->
  <script type="text/javascript">
    /* NOTE: The following code performs many of the pre-processing steps originally handled */
    /* in https://github.com/commonmark/commonmark-spec/blob/master/tools/make_spec.lua      */

    /* Adds a div.example wrapper around each pair of example code blocks. */
    function addAttributesToExampleWrapperDivs() {
      const exampleAnchorTags = document.querySelectorAll("a[href^=\"#example-\"]");
      for (const exampleAnchorTag of exampleAnchorTags) {
        const examplenumDiv = exampleAnchorTag.parentElement;
        examplenumDiv.classList.add("examplenum");
        const exampleDiv = examplenumDiv.parentElement;
        exampleDiv.classList.add("example");
        exampleDiv.id = exampleAnchorTag.getAttribute("href").substring(1);
      }
    }

    function addColumnClassToMarkdownDivs() {
      const markdownCodeBlockDivs = document.querySelectorAll("div.markdown-code-block");
      for (const markdownCodeBlockDiv of markdownCodeBlockDivs) {
        markdownCodeBlockDiv.classList.add("column");
      }
    }

    function addNumbersToHeaders() {
      const headers = document.querySelectorAll('h1,h2,h3');
      let h1Index = -1; // NOTE: -1 because we don't assign a number to the title
      let h2Index = 0;
      let h3Index = 0;
      const tocEntries = [];
      for (const header of headers) {
        if (h1Index === -1) {
          h1Index++;
          continue;
        }

        const originalHeaderTextContent = header.textContent.trim();
        const headerAnchor = originalHeaderTextContent.toLowerCase().replaceAll(' ', '-');
        header.id = headerAnchor;
        let indent;
        let headerTextContent;
        if (header.tagName === 'H1') {
          h1Index++;
          h2Index = 0;
          h3Index = 0;
          header.textContent = headerTextContent = h1Index + ' ' + originalHeaderTextContent;
          indent = 0;
        } else if (header.tagName === 'H2') {
          h2Index++;
          h3Index = 0;
          header.textContent =
            headerTextContent = h1Index + '.' + h2Index + ' ' + originalHeaderTextContent;
          indent = 1;
        } else if (header.tagName === 'H3') {
          h3Index++;
          header.textContent = headerTextContent =
            h1Index + '.' + h2Index + '.' + h3Index + ' ' + originalHeaderTextContent;
          indent = 2;
        }
        tocEntries.push({headerAnchor, headerTextContent, indent});
      }
    }

    document.addEventListener("DOMContentLoaded", function(_event) {
      addAttributesToExampleWrapperDivs();
      addColumnClassToMarkdownDivs();
      const tocEntries = addNumbersToHeaders();
      addToc(tocEntries);
    });

    /* NOTE: The following code is to support the "Try it" interactive "dingus", which        */
    /*       we do not yet support. But it is being left here for comparison context with the */
    /*       original CommonMark template.                                                    */
    // $$(document).ready(function() {
    //   $$("div.example").each(function(e) {
    //     var t = $$(this).find('code.language-markdown').text();
    //     $$(this).find('a.dingus').click(function(f) {
    //       window.open('/dingus/?text=' +
    //         encodeURIComponent(t.replace(/→/g,"\t")));
    //     });
    //   });
    //   $$("code.language-markdown").dblclick(function(e) { window.open('/dingus/?text=' +
    //     encodeURIComponent($$(this).text()));
    //   });
    // });
  </script>
</head>
<body>
<h1 class="title"><%= title %></h1>
<div class="version">Version <%= version %></div>

<%= body %>

</body>
</html>
